.ting-dialog {
  position: fixed;
  background: white;
  min-width: 22em;
  max-width: 32em;
  min-height: 12em;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  &-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: fade_out(black, 0.5);
    z-index: 1;
  }
  &.ting-background-default{
    background:url(./img/background_xxtsk.png) no-repeat center;
    background-size:100% 100%;
  }

  &.ting-background-button{
    background:url(./img/background_xtsk.png) no-repeat center;
    background-size:100% 100%;
  }
  .ting-dialog-header{
    color: $title;
    font-size: 16px;
    margin: 14px 50px 10px;
    padding: 6px 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
  }
  .ting-dialog-main{
    min-height: 50%;
    padding: 12px;
    margin-bottom: 2em;
    color: $default;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .ting-dialog-close{
    position: absolute;
    right: 8px;
    top: 12px
  }

  .ting-dialog-footer{
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 8em;
    display: flex;
    justify-content: space-between;
    button {
      margin: 0 18px;
    }
  }

}